<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<div class="bbyy">
  <% include head.ejs %>
  <div class="container">
    <table border="1" style="width: 100%;text-align: center;border-bottom: none">
      <tr style="border: 1px solid black">
        <th style="width: 400px;text-align: center">商品</th>
        <th style="width: 263px;text-align: center">价格</th>
        <th style="width: 50px;text-align: center">数量</th>
        <th style="width: 263px;text-align: center">小计</th>
        <th>操作</th>
      </tr>
    </table>
    <table border="1" style="width: 100%;text-align: center" id="list">
    </table>
    <h3 style="float: right" id="too">总价：￥{total}</h3>
  </div>
  <% include foot.ejs %>
</div>
<template id="con_temp">
  <tr >
    <td style="width: 400px"><img src="../images/{img}" style="width: 100px;height: 100px">{name}</td>
    <td>￥{money}</td>
    <td>{num}</td>
    <td id="gggg">￥{money}</td>
    <td class="deel" id="ggd" data-id="{id}">删除</td>
  </tr>
</template>
<script>
  function show() {
    $.getJSON('/users/gouwu', function (obj) {
      let temp = $('#con_temp').html();
      let html = '';
      let total = 0;
      console.log(obj);
      obj.row.forEach(function (el) {
        html += temp.replace('{img}', el.img).replace('{num}', el.num).replace('{money}', el.money).replace('{name}', el.name).replace('{money}', el.money).replace('{id}', el.id)
      })
      for(let i=0;i<obj.row.length;i++){
       total=total+obj.row[i].money
      }
      $('#too').html('总价￥'+total)
      console.log(obj)
      $('#list').html(html);
      console.log(obj)
    })
  }
  show();
  $('#list').on('click', 'td', function () {
    if (this.className == 'deel') {
      var id = $('#ggd').data('id');
      console.log(id)
     $.getJSON('/users/dele?id='+id,function (flag) {
       if (flag) {
         alert('删除成功')
         show();
       }
     })
    }
  })
</script>
</html>
